<template>
		
	<view  class="content">
		<musichead  title="音乐"></musichead>
		<view class="container">
			<scroll-view  scroll-y="true"  class="scroll-container">
				<!-- 主页 搜索组件 -->
				<indexsearch @goSeach="goSeach" ></indexsearch>
				
					<!-- 骨架屏 -->
					<view v-if="topList.length == 0">
						<m-for-skeleton
								 :avatar="true"
						         :avatarSize="200"
								 :title="false"
						         :row=3
								 :titleStyle="{}"
						         isarc='square'
						         v-for="(item,key) in 4"
						         :key="key">
						</m-for-skeleton>
					</view>
					<view v-else>
						<!-- 榜单组件 -->
						<indextoplist @topDetail="topDetail"  :topList="topList"></indextoplist>
					</view>
					
					
				
			</scroll-view>
			
		</view>
		
	</view>
	
	
</template>

<script>
	
	//自定义小程序头组件
	import musichead from '@/components/musichead/musichead.vue'
	//主页搜索组件
	import indexsearch from "./indexsearch/indexsearch.vue"
	
	//首页榜单组件
	import indextoplist from "./indextoplist/indextoplist.vue"
	import { getTopList } from '../../common/music-api.js'
	
	// 导入骨架屏组件
	import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
	
	export default {
		data() {
			return {
				topList: [],
			}
		},
		components: {
			musichead,
			indexsearch,
			indextoplist,
			mForSkeleton,
		},
		onLoad() {
			
			getTopList().then(res => {
				this.topList = res
			})
		},
		
		methods: {
			goSeach() {
				
				uni.navigateTo({
					url:'../../components/search/search'
				})
			},
			//接收榜单列表组件发来的事件和id值
			topDetail(id) {
				uni.navigateTo({
					url:"./toplist/toplist?id=" + id
				})
				
			},
			
			
		},
		created() {
		},
		
		
		
	}
</script>

<style scoped>
	.content {
		padding: 0 10px;
	}
	.icon-appreciate {
		width: 100rpx;
		color: #000000;
	}
	
	
	

</style>
